<template>
  <div class="select-number-main">
    <div class="main-left">
      <component :is="currentComponent" :winningInfo="winningInfo"></component>
    </div>
    <transition name="fade">
      <div class="main-right">
        <slot name="winninginfo"></slot>
        <lottery-select-tab 
          :options="options"
          @mutate="updateData"
        ></lottery-select-tab>
        <slot></slot>
        <add-to-cart></add-to-cart>
        <Cart></Cart>
      </div>
    </transition>
  </div>
</template>

<script>
import PublicSidebar from '@/components/base/pc-sidebar/public-sidebar'
import Bj28Sidebar from '@/components/base/pc-sidebar/bj28-sidebar'
import LhcSidebar from '@/components/base/pc-sidebar/lhc-sidebar'
import WinningNumbers from '@/components/winning-numbers/winning-numbers'
import LotterySelectTab from '@/components/lottery-select-tab/lottery-select-tab'
import Cart from '@/components/cart/cart'
import AddToCart from '@/components/base/add-to-cart/add-to-cart'
import { mapGetters } from 'vuex'
export default {
  components: {
    PublicSidebar,
    Bj28Sidebar,
    LhcSidebar,
    WinningNumbers,
    LotterySelectTab,
    Cart,
    AddToCart,
  },
  props: {
    options: {
      type: Array,
      require: true
    },
    // 开奖信息
    winningNumbers: {
      type: Object,
      require: true
    },
    // 侧边栏中奖数据
    winningInfo: {
      type: Array,
      require: true
    },
    currentLottery: {
      type: String,
      default: '重庆时时彩'
    }
  },
  methods: {
    // 子组件改变父组件数据
    updateData(options) {
      this.$emit('mutate', options)
    },
  },
  created() {
    console.log(this.currentLottery)
  },
  computed: {
    ...mapGetters['lottery', 'getLotteryType'],
    currentComponent() {
      let component = 'PublicSidebar'
      switch (this.currentLottery) {
        case '北京28': 
          component = 'Bj28Sidebar'
          break 
        case '香港六合彩': 
          component = 'LhcSidebar'
          break
      }
      return component
    }
  }
 }
</script>

<style lang="stylus" scoped>
  .select-number-main
    width 1200px
    margin 0 auto
    margin-top 10px
    .main-left 
      position fixed 
      top 136px 
    .main-right
      max-width 990px
      width auto 
      margin-left 210px
      background: #fafaf8;
      border:1px solid rgba(219, 211, 211, 1);
      box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius:3px;
      .number-select 
        box-sizing border-box 
        padding 0 20px
      
</style>
